<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>初始HTML</title>

 <style>
 /* 标签选择器 css注释器  ctrl + / */
 div{
    width:100px;
    height:100px;
    background-color: red;
 }
 span{
    width: 100px;  
    height: 100px;
    background-color: #1e072d29;
 }
</style>

</head>
<!--网页主体部分-->
<body>
<!-- 标签/元素是构成网页的重要部分 
    元素：块级元素  行内元素
    块级元素特点
    1独占一行，宽度默认100%
    2设置宽高生效
    3高度默认由内容填充
-->

<div>块级元素</div>
<p>段落标签-块级元素</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 
   行内元素
      特点：1 与其他的行内元素共享一行空间
            2 高度有自身内容决定    
            3 无法通过css属性设置宽高，设置宽高不生效  
-->           
<span>行内元素</span>
<span>行内元素</span>
<em>字体斜体</em>
<i>字体斜体</i>
<b>加粗标签</b>
<strong>加粗标签</strong>
<a href="">百度一下</a>
<sub>下标</sub>
<sub>上标</sub>
</body>
</html>